<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-6">
        <div class="d-flex justify-content-between">
          <span>html</span>
          <el-button icon="el-icon-refresh" @click="toCanvas"></el-button>
        </div>
        <div ref="html" style="width: 592px">
          <h2 class="pdf-title">委托担保合同</h2>
          <p>委托人(以下简称甲方)：铜仁碧江区山水源旅游有限公司</p>
          <p>住 所：贵州省铜仁市碧江区市中办事处南长城路7号C栋</p>
          <p>受托人(以下简称乙方)：沈良洪</p>
          <p>住 所：贵州省铜仁市碧江区市中办事处南长城路</p>
          <p>法定代表人：沈良洪</p>
          <p class="text-indent">
            <span class="font-weight-bold">
              乙方特别提示甲方通读本合同条款，并应甲方要求对合同条款作详尽解释，请甲方在完全理解合同条款基础上，签署本合同。
            </span>
          </p>
          <p class="text-indent">
            <span>乙方受甲方委托，同意按本合同之约定为甲方在</span>
            <span class="text-decoration">江口长征村镇银行</span>
            <span>（以下简称贷款人)的债务（编号为</span>
            <span class="text-decoration">AA0001</span>
            <span>
              号的授信合同下）提供保证担保，甲、乙双方依照国家法律、法规的规定，经双方协商一致订立本合同。
            </span>
          </p>
          <p class="text-indent">三、甲方不得以下列情况为由要求乙方退还已收取的担保费：</p>
          <p class="text-indent">1、甲方与贷款人之间的借款合同无效、变更或解除；</p>
          <p class="text-indent">2、甲方提前向贷款人归还全部或部分融资款；</p>
          <p class="text-indent">3、贷款人提前收回全部或部分融资款；</p>
          <p class="text-indent">4、甲方中途拒绝乙方为其提供担保；</p>
          <p class="text-indent">5、乙方根据本合同约定中止或终止继续为甲方担保。</p>
          <p class="text-indent">
            <span class="font-weight-bold">第三条 乙方的代位求偿权及抗辩权</span>
          </p>
          <p class="text-indent">
            一、乙方履行了保证义务代甲方清偿债务后，即取代贷款人的债权人地位，有权直接向甲方追偿。
          </p>
          <p class="text-indent">二、甲方不得放弃对贷款人债务的抗辩权。</p>
          <p class="text-indent"><span class="font-weight-bold">第四条 甲方的义务</span></p>
          <p class="text-indent">
            一、甲方承诺：在委托乙方担保时，其经营状况良好，不存在重大经济纠纷、不涉及重大经济诉讼及其他足以影响其正常经营管理活动的隐患，并确保向乙方介绍和提供的反映甲方生产、经营和管理的情况及相关材料客观、真实、全面。
          </p>
          <p class="text-indent">
            二、借款之用途符合与贷款人在借款合同中的约定，不得挪作它用，并按照借款合同的约定严格履行还款义务。
          </p>
          <p class="text-indent">
            三、因甲方违约导致乙方代偿的，在接到乙方书面通知后3日内向乙方清偿由乙方代偿的全部款项。乙方通知行为的有效形式包括信函、传真、电子邮件或派人直接送达等方式。
          </p>
          <p class="text-indent">
            四、积极配合乙方必要的检查和监督，应乙方要求定期或不定期向乙方报送反映甲方生产经营情况、债权债务及处置情况、借款使用情况、项目进度情况及财务报表等文件材料并保证其真实性、合法性和完整性。
          </p>
          <p class="text-indent">
            五、乙方担保责任期限内，甲方发生合并、分立、资产重组、股份制改造、承包、租赁、解散或破产清算等情形，均应提前30日通知乙方，并征得乙方的书面同意，乙方有权参与有关法律文件的拟定。甲方变更其名称、经营范围、注册资金、住所、法定代表人等，应当提前30日通知乙方，并不得因此而损害乙方作为保证人的利益。
          </p>
          <p class="text-indent">
            甲方提供的反担保人出现前款约定情形的，甲方应在知道或应当知道之日起3日内通知乙方。
          </p>
          <p class="text-indent">
            六、乙方在担保期间，有权查阅甲方在各家金融机构的账户信息，本条款约定即视为甲方对乙方查阅账户的授权。
          </p>
          <p class="text-indent"><span class="font-weight-bold">第五条 甲方提供的反担保</span></p>
          <p class="text-indent">一、对本合同项下甲方的所有义务和责任</p>
          <p class="text-indent">
            <span>1、</span>
            <span class="text-decoration">AAAAA</span>
            <span>BBBBBBB。</span>
          </p>
          <p class="text-indent">
            <span>2、</span>
            <span class="text-decoration">CCCCCCC</span>
            <span>BBBBBBB。</span>
          </p>
          <p class="text-indent">
            二、有关抵（质）押反担保或其它形式的保障事项由各方当事人签订相关合同、协议约定，如需办理相应的登记、备案或公证等法律手续，费用由甲方承担。若因甲方或相关第三人的原因不能办理登记、备案或公证法律手续，因此给乙方造成的损失由甲方承担赔偿责任。
          </p>
          <p class="text-indent">
            <span class="font-weight-bold">第六条</span>
            本合同不得作乙方负有必须为甲方提供融资担保义务之解释。发生下列情形之一的，乙方有权中止或终止继续为甲方担保，并有权通知贷款人中止或终止履行义务：
          </p>
          <p class="text-indent">一、甲方违反本合同第四条任一款之约定义务；</p>
          <p class="text-indent">二、甲方未按约定向乙方支付担保费、保证金及其他费用；</p>
          <p class="text-indent">三、甲方向乙方提供的反担保尚未生效；</p>
          <p class="text-indent">四、甲方或相关第三人有故意损害或转移反担保资产的行为；</p>
          <p class="text-indent">
            五、甲方提供的反担保资产因使用或市场变化发生严重贬值，甲方未按乙方要求补充反担保资产或提供相应的反担保措施的；
          </p>
          <p class="text-indent">六、甲方向乙方提供虚假资料或故意隐瞒重大经营管理活动；</p>
          <p class="text-indent">七、甲方生产经营状况恶化或发生足以影响甲方正常生产经营的情形。</p>
          <p class="text-indent"><span class="font-weight-bold">第七条 违约责任</span></p>
          <p class="text-indent">
            一、甲方逾期支付担保费的，应按逾期付款额的百分之一/日向乙方支付违约金。
          </p>
          <p class="text-indent">
            二、因甲方违约导致乙方代偿的，应当以乙方代偿金额的千分之一/日向乙方支付违约金，至甲方付清代偿金额之日止。因此给乙方造成其他损失的，甲方应支付相应的赔偿金（包括但不限于律师费、差旅费、评估费等）。
          </p>
          <p class="text-indent">
            三、对甲方违反诚信义务的行为，乙方有权将其信誉状况通过有关媒体向社会公布。
          </p>
          <p class="text-indent"><span class="font-weight-bold">第八条 争议的解决</span></p>
          <p class="text-indent">
            本合同履行过程中发生的争议，由双方协商解决，协商不成的，双方均同意向乙方住所地有管辖权的人民法院提起诉讼。
          </p>
          <p class="text-indent">
            <span class="font-weight-bold">第九条</span>
            本合同自签订之日起生效。本合同原件各当事人各执一份，办理相关法律手续所需文本按需设置。
          </p>
          <div class="d-flex" style="margin: 50px 0">
            <div class="flex-1">
              <p>甲方（签章）：</p>
              <p>法定代表人或</p>
              <p>
                <span>授权代理人：</span>
                <span class="text-decoration">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </span>
              </p>
            </div>
            <div class="flex-1">
              <p>乙方（盖章）：</p>
              <p>法定代表人或</p>
              <p>
                <span>授权代理人：</span>
                <span class="text-decoration">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </span>
              </p>
            </div>
          </div>
          <p class="text-right" style="margin: 50px 0">
            <span>签订日期：</span>
            <span class="text-decoration">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span>年</span>
            <span class="text-decoration">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span>月</span>
            <span class="text-decoration">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span>日</span>
          </p>
        </div>
      </div>
      <div class="col-6">
        <div class="d-flex justify-content-between">
          <span>preview</span>
          <el-button icon="el-icon-download" @click="downloadPdf"></el-button>
        </div>
        <div ref="prev" style="width: 592px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { loadRemote, config } from '@vimi/utils-tool'

const jspdfCdn = `${config.baseUrl}/libs/jspdf/2.2.0/jspdf.umd.min.js`
const html2canvasCdn = `${config.baseUrl}/libs/html2canvas/1.0.0-rc.7/html2canvas.min.js`

export default {
  components: {},
  props: {},
  data() {
    return {
      canvas: null,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    Promise.all([loadRemote(html2canvasCdn, 'html2canvas'), loadRemote(jspdfCdn, 'jspdf')]).then(
      () => {
        this.toCanvas()
      }
    )
  },
  methods: {
    toCanvas() {
      const { html, prev } = this.$refs
      if (!html || !prev) return

      window
        .html2canvas(html, {
          allowTaint: true,
        })
        .then(canvas => {
          prev.innerHtml = ''
          prev.appendChild(canvas)
          this.canvas = canvas
        })
    },

    downloadPdf() {
      const { canvas } = this
      const { width, height } = canvas

      // a4 size
      const a4Width = 592.28
      const a4Height = 841.89

      // 一页 PDF 的 canvas 高度
      const pageHeight = (width / a4Width) * a4Height
      const pagePadding = 40
      const imgWidth = a4Width - pagePadding
      const imgHeight = (a4Width / width) * height
      const pageData = canvas.toDataURL('image/jpeg', 1.0)

      // eslint-disable-next-line new-cap
      const pdf = new window.jspdf.jsPDF({
        orientation: 'p', // portrait(p), landscape(l)
        unit: 'pt', // pt, mm, cm, in
        format: 'a4', // a4
        hotfixes: [], // an array of hotfix strings to enable
      })

      // 未生成 pdf 的 html 高度
      let leftHeight = height
      // 页面偏移
      let position = 0

      // 内容未超过 pdf 一页的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', pagePadding / 2, 0, imgWidth, imgHeight)
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', pagePadding / 2, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= a4Height
          // 避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }

      pdf.save('html.pdf')
    },
  },
}
</script>

<style lang="scss" scoped>
.pdf-title {
  font-size: 1.5rem;
  text-align: center;
}
</style>
